<template>
  <div class="home">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="(item,index) in list" :key="item.id" @click="toDetail(item.id)">
        <div class="list">
          <div class="left">
            <img :src="item.img" alt=""/>
          </div>
          <div class="right">
            <div class="title">{{item.title}}</div>
            <div class="create-time">{{item.createTime}}</div>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script lang="ts">
  import  { Component, Vue } from 'vue-property-decorator';
  import apis from '@/plugins/xhr.ts';
  import moment from 'moment'

  @Component({
      name: 'home',
      components: {

      }
  })
  export default class Home extends Vue {
      private list: any = [];
      private loading: boolean = false;
      private finished: boolean = false;

      private created():void {
          // vant ui中的list组件加载数据，*不需要在引入list的组件中的mounted和created中调用获取数据请求

      }

      private async onLoad() {
          const res: any = await apis.getList()
          if (res.data.success) {
              this.list = res.data.data.map(item => {
                  if (item.createTime) {
                      item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss');
                  }
                  return item;
              });
              this.loading = false;
              this.finished = true;
          } else {
              this.$toast.fail(res.data.message)
          }
         // 测试
         // setTimeout(() => {
         //     this.list = [{
         //         id: 1,
         //         title: '一只大苹果',
         //         img: 'https://dss0.baidu.com/73x1bjeh1BF3odCf/it/u=1982813398,3321026606&fm=85&s=1030C033171153D4D96DE8D70100C0A0',
         //         summary: '撒旦撒旦圣诞节撒角度看',
         //         content: 'qewqwewqewqewqdfdsf王企鹅无群二无群其味无穷若无群若无群权威汽车消费图1',
         //         createTime: '2019-10-10 10:20:20'
         //     }, {
         //         id: 2,
         //         title: '无邪',
         //         img: 'https://dss0.baidu.com/73x1bjeh1BF3odCf/it/u=1982813398,3321026606&fm=85&s=1030C033171153D4D96DE8D70100C0A0',
         //         summary: '撒旦撒旦圣诞节撒角度看',
         //         content: 'qewqwewqewqewqdfdsf王企鹅无群二无群其味无穷若无群若无群权威汽车消费图1',
         //         createTime: '2019-10-10 10:20:20'
         //     }];
         //     this.loading = false;
         //     this.finished = true;
         // },1000)
      }
      private toDetail(id: number) {
          (this.$router as any).push({
              name: 'detail',
              query: {
                  id
              }
          })
      }

  }
</script>
<style>
  .list{
    display: flex;
    flex-direction: row;
  }
  .list .left,img {
    width: 150px;
    height: 100px;
    border-radius: 10px;
  }
  .list .right {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-left: 15px;
   }
  .list .right .title {
    font-size: 18px;

  }
  .list .right .create-time {
    font-size: 12px;
    color: #9e9e9e;
  }
</style>
